<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cinux - 登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        }
        
        body {
            background-color: #f6f8fa;
            color: #24292e;
            line-height: 1.5;
            padding: 20px;
            max-width: 500px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin: 40px 0;
            padding-bottom: 20px;
            border-bottom: 1px solid #e1e4e8;
        }
        
        h1 {
            font-size: 24px;
            font-weight: 400;
            margin-bottom: 8px;
        }
        
        .description {
            color: #6a737d;
            font-size: 14px;
        }
        
        .login-form {
            background: #fff;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            font-weight: 600;
        }
        
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #e1e4e8;
            border-radius: 3px;
            font-family: monospace;
            font-size: 14px;
        }
        
        input:focus {
            outline: none;
            border-color: #0366d6;
            box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
        }
        
        button {
            background-color: #2ea44f;
            color: #fff;
            border: 1px solid rgba(27, 31, 35, 0.15);
            border-radius: 3px;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            width: 100%;
        }
        
        button:hover {
            background-color: #2c974b;
        }
        
        .alert {
            padding: 10px;
            border: 1px solid;
            border-radius: 3px;
            margin-bottom: 15px;
            display: none;
            font-size: 14px;
        }
        
        .alert-error {
            color: #86181d;
            background-color: #ffdce0;
            border-color: #cea0a5;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #e1e4e8;
            color: #6a737d;
            font-size: 12px;
        }
        
        .terms-link {
            color: #0366d6;
            text-decoration: none;
            font-size: 13px;
            display: block;
            text-align: center;
            margin-top: 15px;
        }
        
        .terms-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <header>
        <h1>Cinux 项目门户</h1>
        <p class="description">简约 · 高效 · 开源</p>
    </header>
    
    <div class="login-form">
        <h2>用户登录</h2>
        <div id="loginAlert" class="alert"></div>
        
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名">
        </div>
        
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        
        <button onclick="login()">登录</button>
        
        <a href="account.html" class="terms-link">查看用户协议</a>
    </div>
    
    <footer>
        <p>Powered by JSON 数据存储 | 遵守中国法律，合理使用资源</p>
    </footer>

    <script>
        // 用户数据文件路径
        const USER_DATA_FILE = 'users.json';
        
        // 检查是否已同意条款
        window.onload = function() {
            if (localStorage.getItem('agreedToTerms') !== 'true') {
                window.location.href = 'account.html';
            }
        };
        
        // 显示消息
        function showAlert(message, type) {
            const alertBox = document.getElementById('loginAlert');
            alertBox.textContent = message;
            alertBox.className = `alert alert-${type}`;
            alertBox.style.display = 'block';
            
            // 5秒后隐藏警告
            setTimeout(() => {
                alertBox.style.display = 'none';
            }, 5000);
        }
        
        // 加载JSON文件
        async function loadJsonFile(filename) {
            try {
                const response = await fetch(filename);
                if (!response.ok) {
                    // 如果文件不存在，返回空数据
                    if (response.status === 404) {
                        return [];
                    }
                    throw new Error(`无法加载文件: ${response.status}`);
                }
                return await response.json();
            } catch (error) {
                console.error('加载JSON文件出错:', error);
                return [];
            }
        }
        
        // 登录功能
        async function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            if (!username || !password) {
                showAlert('用户名和密码不能为空', 'error');
                return;
            }
            
            // 加载用户数据
            const users = await loadJsonFile(USER_DATA_FILE);
            
            // 验证用户凭据
            const user = users.find(u => u.username === username && u.password === password);
            
            if (user) {
                // 登录成功，保存用户信息到sessionStorage
                sessionStorage.setItem('currentUser', JSON.stringify(user));
                
                // 跳转到仓库页面
                window.location.href = 'repos.html';
            } else {
                showAlert('用户名或密码错误', 'error');
            }
        }
    </script>
</body>
</html>
